<template>
	<view class="timer-box w100">
		<view class="switch-box w100 flex-row-center">
			<text class="title">是否接单</text>
			<up-switch size="20" :activeValue="1" asyncChange :loading="switchLoading" :inactiveValue="0"
				v-model="assistantInfo.order_switch" activeColor="#60D4C1" @change="asyncChange"></up-switch>
		</view>
		<!-- 时间列表 -->
		<view class="timer-list w100">
			<text class="title">接单时间</text>
			<view class="timer-content w100">
				<view class="timer-item flex w100" v-for="(item,index) in timeInfo.list" :key="item.id">
					<view class="content flex-center">
						<text class="text">{{item.start_hours}}：{{item.start_minute}}</text>
						<text class="text icon">~</text>
						<text class="text">{{item.end_hours}}：{{item.end_minute}}</text>
					</view>
					<!-- 操作 -->
					<view class="option-box flex-row-center">
						<view class="option-btn flex-center borderR" @click.stop="delItem(item.id)">
							<text class="text">删除</text>
						</view>
						<view class="option-btn flex-center" @click.stop="alterItem(item)">
							<text class="writeOff-text">编辑</text>
						</view>
					</view>
				</view>
				<view class="view-more" @click="getMoreTime">
					<up-loadmore :status="timeInfo.status" />
				</view>
				<view class="add-btn flex-center" @click="()=>timerPopup=true">
					<up-icon name="plus" color="#A2DEA3" size="28rpx"></up-icon>
					<text class="text">添加时间</text>
				</view>

			</view>
		</view>
	</view>
	<up-popup :show="timerPopup" @close="closeTimer" :safeAreaInsetBottom="false" @open="openTimer" round='20rpx'
		mode="center">
		<view class="timerPopup">
			<text class="title w100">添加接单时间</text>
			<view class="choosetimer-content flex-center w100">
				<view class="choosetimer-int" @click="toChoose(1)">
					<up-input inputAlign="right" border="none" disabled placeholderClass="placeholderClass"
						fontSize="26rpx" color="#DEDEDE" placeholder="请选择开始时间" v-model="timeInfo.startTime"></up-input>
				</view>
				<text class="text">至</text>
				<view class="choosetimer-int" @click="toChoose(2)">
					<up-input inputAlign="left" border="none" disabled :customStyle="{width:'100%'}"
						placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE" placeholder="请选择开始时间"
						v-model="timeInfo.endTime"></up-input>
				</view>
			</view>
			<view class="choosetimer-btn w100 flex-row-center">
				<view class="close-btn flex-center" @click="closeTimer">
					<text class="text">取消</text>
				</view>
				<view class="add-btn flex-center" @click="submitTime">
					<text class="text" v-if="timeInfo.editId">编辑</text>
					<text class="text" v-else>添加</text>
				</view>
			</view>
		</view>
	</up-popup>
	<up-datetime-picker ref="datetimePickerRef" @confirm="timerConfim" @close="()=>timerShow=false" :show="timerShow"
		mode="time" :formatter="formatter"></up-datetime-picker>
	<up-datetime-picker ref="datetimePickerRef" @confirm="timerEndConfim" :minHour="timeInfo.startHours"
		:minMinute="timeInfo.StartMinute" @close="()=>timerEndShow=false" :show="timerEndShow" mode="time"
		:formatter="formatter"></up-datetime-picker>
</template>

<script setup>
	import {
		formatDate,
		countDecimalPlaces,
		toDecimal2
	} from '@/utils/utools.js';
	import {
		assistantStore
	} from '@/stores/assistant.js';
	const formatter = (type, value) => {
		if (type === 'hour') {
			return `${value}时`;
		}
		if (type === 'minute') {
			return `${value}分`;
		}
		return value;
	};
	const assistantInfoStore = assistantStore();
	const assistantInfo = ref(computed(() => assistantInfoStore.assistantInfo));
	const switchLoading = ref(false);
	const timerPopup = ref(false);
	const timerShow = ref(false);
	const timerEndShow = ref(false);
	const timeInfo = reactive({
		startTime: '',
		endTime: '',
		startHours: 0, //开始时间搓
		StartMinute: 0, //结束时间搓
		endHours: 0, //开始时间搓
		endMinute: 0, //结束时间搓
		loading: false,
		page: 1,
		list: [],
		status: 'loadmore',
		editId: 0
	});
	onLoad(() => {
		getTimer();
	})
	onReachBottom(() => {
		getMoreTime();
	})
	const getTimer = async () => {
		const res = await $Api.assistant.getTimer({
			page: timeInfo.page
		})
		if (res.code == 1) {
			if (res.data && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					return {
						...val,
						end_hours: val.end_hours < 10 ? ('0' + val.end_hours) : val.end_hours,
						start_hours: val.start_hours < 10 ? ('0' + val.start_hours) : val.start_hours,
						start_minute: val.start_minute < 10 ? ('0' + val.start_minute) : val.start_minute,
						end_minute: val.end_minute < 10 ? ('0' + val.end_minute) : val.end_minute,
					}
				});
				timeInfo.list = [...timeInfo.list, ...arr];
			}
			if (res.data.totalPage && res.data.totalPage > timeInfo.page) {
				timeInfo.page++;
				timeInfo.status = 'loadmore'
			} else {
				timeInfo.status = 'nomore'
			}
		} else {
			uni.$u.toast()
		}
	}
	const getMoreTime = () => {
		if (timeInfo.status == 'nomore' || timeInfo.status == 'loading') return
		timeInfo.status = 'loding'
		setTimeout(() => {
			getTimer();
		}, 300)
	}
	const openTimer = () => {
		timerPopup.value = true;
	}
	const toChoose = (type) => { //选择时间类型
		if (type == 1) {
			timerShow.value = true;
		} else {
			timerEndShow.value = true;
		}
	}
	const delItem = (id) => {
		uni.showModal({
			title: '提示',
			content: '确定删除该时间？',
			success: async (res) => {
				if (res.confirm) {
					uni.showLoading({
						title: '请求中'
					});
					const res = await $Api.assistant.delTime({
						id
					});
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: '删除成功！'
						})
						timeInfo.list = timeInfo.list.filter(val => val.id !== id);
					} else {
						uni.hideLoading();
						uni.$u.toast(res.msg)
					}
				} else if (res.cancel) {}
			}
		});
	}
	const alterItem = (item) => { //编辑触发
		timeInfo.editId = item.id;
		timeInfo.startTime = item.start_hours + ':' + item.start_minute;
		timeInfo.endTime = item.end_hours + ':' + item.end_minute;
		timeInfo.startHours = Number(item.start_hours);
		timeInfo.StartMinute = Number(item.start_minute);
		timeInfo.endHours = Number(item.end_hours);
		timeInfo.endMinute = Number(item.end_minute);
		timerPopup.value = true;
	}
	const closeTimer = () => {
		timeInfo.startTime = '';
		timeInfo.endTime = '';
		timeInfo.startHours = 0;
		timeInfo.StartMinute = 0;
		timeInfo.editId = 0;
		timerPopup.value = false;
	}
	const asyncChange = async (value) => {
		switchLoading.value = true;
		const res = await $Api.assistant.setAssistantSwitch({
			status: value
		});
		switchLoading.value = false;
		if (res.code == 1) {
			assistantInfoStore.assistantInfo.order_switch = value;
			uni.$u.toast(res.msg);
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const timerConfim = (e) => { //确定时间
		if (e.value) {
			let arr = []
			arr = e.value.split(':');
			if (arr && arr.length >= 2) {
				timeInfo.startHours = Number(arr[0]) || 0;
				timeInfo.StartMinute = Number(arr[1]) || 0;
			}
			timeInfo.startTime = e.value;
			timerShow.value = false;
		}
	}
	const timerEndConfim = (e) => {
		if (!timeInfo.startTime) {
			uni.$u.toast('请先选择起始时间');
			return
		}
		if (e.value) {
			let arr = []
			arr = e.value.split(':');
			if (arr && arr.length >= 2) {
				timeInfo.endHours = Number(arr[0]) || 0;
				timeInfo.endMinute = Number(arr[1]) || 0;
			}
			timeInfo.endTime = e.value;
			timerEndShow.value = false;
		}
	}
	const submitTime = async () => {
		if (timeInfo.loading) return;
		if (timeInfo.startTime == '' || timeInfo.endTime == '') {
			uni.$u.toast('请先选择时间');
			return
		}
		timeInfo.loading = true;
		if (timeInfo.editId != 0) { //是否编辑
			const res = await $Api.assistant.editTime({
				start_time: timeInfo.startTime,
				end_time: timeInfo.endTime,
				id: timeInfo.editId
			});
			if (res.code == 1) {
				uni.showToast({
					title: '编辑成功'
				})
				timeInfo.list = timeInfo.list.map(val => {
					if (val.id == timeInfo.editId) {
						return {
							...val,
							end_hours: timeInfo.endHours < 10 ? ('0' + timeInfo.endHours) : timeInfo.endHours,
							start_hours: timeInfo.startHours < 10 ? ('0' + timeInfo.startHours) : timeInfo.startHours,
							start_minute: timeInfo.startHours < 10 ? ('0' + timeInfo.startHours) : timeInfo.startHours,
							end_minute: timeInfo.endMinute < 10 ? ('0' + timeInfo.endMinute) : timeInfo.endMinute,
						}
					} else {
						return val
					}
				})
				setTimeout(() => {
					timeInfo.loading = false;
					closeTimer();
				}, 800)
			} else {
				uni.$u.toast(res.msg);
				timeInfo.loading = false;
			}
		} else {
			const res = await $Api.assistant.setTimer({
				start_time: timeInfo.startTime,
				end_time: timeInfo.endTime,
			});
			if (res.code == 1) {
				uni.showToast({
					title: '添加成功'
				})
				reshData()
				setTimeout(() => {
					timeInfo.loading = false;
					closeTimer();
				}, 800)
			} else {
				uni.$u.toast(res.msg);
				timeInfo.loading = false;
			}
		}
	}
	const reshData = () => {
		timeInfo.list = [];
		timeInfo.page = 1;
		timeInfo.status = 'loadmore';
		getTimer()
	}
</script>
<style>
	.u-textarea__count,
	.u-input,
	.u-textarea {
		padding: 0 !important;
		background-color: transparent !important;
	}

	.placeholderClass {
		color: #5B6868 !important;
		font-size: 26rpx;
		font-weight: 500;
	}

	.u-textarea__field {
		color: #fff !important;
	}
</style>
<style lang="scss" scoped>
	view {}

	.timer-box {
		padding: 36rpx 24rpx;

		.title {
			color: $name-color;
			font-size: 28rpx;
			font-weight: 600;
			display: block;
		}
	}

	.switch-box {
		justify-content: space-between;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;
	}

	.timer-list {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx;
		background: #222528;
	}

	.timer-content {
		margin-top: 24rpx;
		display: flex;
		flex-direction: column;
		// grid-template-columns: repeat(4, 1fr);
		// row-gap: 42rpx;
		// column-gap: 24rpx;

		.timer-item {
			border-radius: 12rpx;
			border: 2rpx solid $attention-color;
			box-sizing: border-box;
			padding: 12rpx 20rpx;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.text {
				font-size: 30rpx;
				color: $attention-color;
			}

			.content {
				height: 88rpx;

				.icon {
					margin: 0 24rpx;
				}
			}
		}

		.option-box {
			width: 100%;
			border-top: 2rpx solid #2F3235;
			height: 62rpx;

			.option-btn {
				width: 50%;
				height: 100%;
				box-sizing: border-box;

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #848687;
				}

				.writeOff-text {
					font-weight: 500;
					font-size: 28rpx;
					color: #99D19A;
				}
			}

			.borderR {
				border-right: 2rpx solid #2F3235;
			}
		}

		.add-btn {
			margin: 0 auto;
			width: 380rpx;
			height: 68rpx;
			border-radius: 34rpx;
			border: 2rpx solid $attention-color;

			.text {
				font-size: 22rpx;
				color: $attention-color;
				margin-left: 8rpx;
			}
		}
	}

	.timerPopup {
		width: 680rpx;
		padding: 32rpx 24rpx;
		background: #222528;
		border-radius: 20rpx;
		box-sizing: border-box;

		.title {
			color: $name-color;
			font-size: 28rpx;
			font-weight: 600;
			display: block;
			text-align: center;
		}

		.choosetimer-content {
			min-height: 200rpx;

			.text {
				color: $name-color;
				font-size: 28rpx;
				margin: 0 16rpx;
			}
		}

		.choosetimer-btn {
			justify-content: space-around;

			.choosetimer-int {
				width: 120rpx;
			}

			.close-btn {
				width: 30%;
				height: 68rpx;
				border-radius: 34rpx;
				border: 2rpx solid #6DC5BC;
				padding: 0;

				.text {
					font-weight: bold;
					font-size: 30rpx;
					color: #6DC5BC;
				}
			}

			.add-btn {
				width: 30%;
				height: 68rpx;
				background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 34rpx;
				box-sizing: border-box;

				.text {
					font-weight: bold;
					font-size: 30rpx;
					color: $btn-text-color;
				}
			}
		}
	}
</style>